<html>
    <head>
        <meta charset="utf-8">
        <script src="../dist/claygl.js"></script>
    </head>
    <body>
        <canvas width="1200" height="640" id="main"></canvas>

        <script type="text/javascript">
            var Shader = clay.Shader;
            var pp_FilterNode = clay.compositor.FilterNode;
            var pp_SceneNode = clay.compositor.SceneNode;
            var compositor = new clay.compositor.Compositor();

            var renderer = new clay.Renderer({
                canvas: document.getElementById('main'),
                devicePixelRatio: 1.0
            });
            //Create scene
            var scene = new clay.Scene(),
                camera = new clay.camera.Perspective({
                    aspect: renderer.canvas.width/renderer.canvas.height,
                    far: 500
                }),
                cube = new clay.geometry.Cube();
            var shader = new Shader({
                vertex: Shader.source('clay.lambert.vertex'),
                fragment: Shader.source('clay.lambert.fragment')
            })
            var material = new clay.Material({
                shader: shader
            });
            var texture = new clay.Texture2D();
            texture.image = new Image();
            texture.image.onload = function(){
                texture.dirty();
            }
            texture.image.src = 'assets/textures/crate.gif';
            material.set('diffuseMap', texture );
            var mesh = new clay.Mesh({
                material: material,
                geometry: cube
            })

            scene.add( mesh );

            camera.position.set(0, 2, 2);
            camera.lookAt( new clay.Vector3() );

            var light = new clay.light.Directional({
                color: [1.5, 1.5, 1.5]
            })
            light.position.set(50, 50, 50);
            light.lookAt(new clay.Vector3());
            scene.add(light);

            compositor.addNode(new pp_SceneNode({
                name: 'scene',
                scene: scene,
                camera: camera,
                outputs: {
                    'color': {
                        parameters: {
                            width: 1024,
                            height: 1024
                        }
                    }
                }
            }) );
            var colorAdjustNode = new pp_FilterNode({
                name: 'coloradjust',
                shader: Shader.source('clay.compositor.coloradjust'),
                inputs: {
                    'texture': {
                        node: 'scene',
                        pin: 'color'
                    }
                },
                outputs: null
            })
            colorAdjustNode.setParameter('gamma', 1.3);
            compositor.addNode( colorAdjustNode );

            setInterval(function(){
                compositor.render(renderer);
                mesh.rotation.rotateY(Math.PI/500);
            }, 20);

        </script>
    </body>
</html>